<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/font-family.css">
  <link rel="stylesheet" href="css/swiper.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/travel-note.css">
  <link rel="stylesheet" href="css/my-account.css">
  <script src="js/jquery-3.3.1.min.js"></script>
  <title>Travel Sharer</title>
</head>

<body>
  <!-- 导航 start -->
  <div class="nav-top">
    <div class="nav-login">
      <!-- 登录前 start -->
      <div class="nav-head" style="display: none;">
        <a href="login.html">
          <img class="login-img" src="img/head.png" alt="">
          <span>Log In/ Sign Up</span>
        </a>
      </div>
      <!-- 登录前 end -->

      <!-- 登录后 start -->
      <div class="nav-head login-for">
        <a class="click-more-nav">
          <img class="login-img" src="img/head.png" alt="">
          <span>Hello 呆呆呆</span>
          <img class="login-more" src="img/xiala.png" alt="">
        </a>
        <ul class="more-nav">
          <a href="myAccount.html">
            <li>My Account</li>
          </a>
          <li class="line-li"><div class="line"></div></li>
          <a href="">
            <li>Log Out</li>
          </a>
        </ul>
      </div>
      <!-- 登录后 end -->

      <div class="nav-link">
        <a href="https://www.facebook.com/">
          <img src="img/fb.png" alt="">
        </a>
        <a href="https://www.instagram.com/">
          <img src="img/ins.png" alt="">
        </a>
      </div>
    </div>
    <nav class="nav-list">
      <ul class="nav-detail">
        <li>
          <a href="index.html">Hmoe</a>
        </li>
        <li>
          <a href="travelNote.html">Travel Note</a>
        </li>
        <li>
          <a href="findTraveller.html">Find Traveller</a>
        </li>
        <li>
          <a href="discover.html">Discover</a>
        </li>
        <li>
          <a href="#" class="nav-action">My Post</a>
        </li>
        <li>
          <a href="members.html">Members</a>
        </li>
        <li>
          <a href="myCollection.html">My Collection</a>
        </li>
        <li>
          <a href="about.html">About</a>
        </li>
      </ul>
      <div class="nav-search">
        <img src="img/search.png" alt="">
        <input type="text" placeholder="Search Site">
      </div>
    </nav>
  </div>
  <!-- 导航 end -->
  <!-- 中部 start -->
  <div class="center-box">
    <div class="account-box">
      <div class="a-box-left">
        <div class="per-info" id="now-info">
          <img src="img/head.png" class="per-img" alt="">
          <div class="per-name">用户名</div>
          <a href="#">
            <div class="join-c">
              Join Community
            </div>
          </a>
          <div class="edit-per">
            <img src="img/noteMore.png" id="note-more" alt="">
            <a id="edit-info-click">
              <div class="edit-box">Edit Profile</div>
            </a>
          </div>
        </div>
        <!-- 点击修改 start -->
        <div class="per-info" style="display: none;" id="edit-info">
          <img src="img/detail1.png" id="edit-avatar" class="per-img" alt="">
          <div class="upload-head-img">
            <!-- <input type="file" name="file" accept="image/*" id="upload" style="opacity: 0;width: 0;height: 0;"> -->
            <input type="file" name="targetFile" id="targetFile" onchange="change(this)" accept="image/*"  style="opacity: 0;width: 0;height: 0;">
            <img src="img/camera.png" alt="">
          </div>
          <div class="per-name">
            <input type="text">
          </div>
          <div class="per-edit-btn"> 
            <button class="per-edit-cancel">Cancel</button>
            <button class="per-edit-confirm">Save</button>
          </div>
          <div class="edit-per">
            <img src="img/noteMore.png" alt="">
          </div>
        </div>
        <!-- 点击修改 end -->

        <a href="#">
          <div class="per-self">
            My Account
          </div>
        </a>
        
      </div>
      <div class="a-box-right">
        <h4>My Account</h4>
        <div class="edit-tip">View and edit your personal info below.</div>
        <hr>
        <div class="edit-email">
          <p class="edit-title">Login Email:</p>
          <div class="edit-per-email">
            asua.ddai@gmail.com 
            <div class="edit-tip-box">
              <a class="edit-tip-img"><img src="img/tip.png" ></a>
              <div class="edit-email-tip">You login email can't be changed.</div>
            </div>
          </div>
        </div>
        <div class="edit-url">
          <p class="edit-tip-box">Your Community Page URL</p>
          <p class="edit-url-tip">This is your own personalised URL that other members can see.</p>
          <p class="url-show">https://www.travelsharer.co.uk/profile/nihao</p>
          <input class="url-input" type="text">
        </div>
        <div class="edit-basic-info">
          <div class="basic-box">
            <p class="edit-title">First Name</p>
            <input class="basic-input" type="text">
          </div>
          <div class="basic-box">
            <p class="edit-title">Last Name</p>
            <input class="basic-input" type="text">
          </div>
        </div>
        <div class="edit-basic-info">
          <div class="basic-box">
            <p class="edit-title">Contact Email <img class="basic-opera" src="img/add.png" alt=""></p>
            <input class="basic-input" type="text">
            <p class="basic-email-tip">This is the email we’ll use to contact you.</p>
          </div>
          <div class="basic-box">
            <p class="edit-title">Contact Email
              <img class="basic-opera" src="img/delete.png" alt="">
            </p>
            <input class="basic-input" type="text">
          </div>
          <div class="basic-box">
            <p class="edit-title">Phone <img class="basic-opera" src="img/add.png" alt=""></p>
            <input class="basic-input" type="text" placeholder="e.g,+ 1415-189-9090">
          </div>
          <div class="basic-box">
            <p class="edit-title">Phone
              <img class="basic-opera" src="img/delete.png" alt="">
            </p>
            <input class="basic-input" type="text" placeholder="e.g,+ 1415-189-9090">
          </div>
          
          <!-- 一行单个的样式 start -->
          <div class="basic-box" style="width: 100%;">
            <p class="edit-title">Phone
              <img class="basic-opera" src="img/add.png" alt="">
            </p>
            <input class="basic-input" type="text" placeholder="e.g,+ 1415-189-9090">
          </div>
          <!-- 一行单个的样式 end -->
        </div>
        <div class="edit-basic-info">
          <div class="basic-box">
            <a>
              <div class="upload-info-btn" id="upload">
                Upload Info
              </div>
              <!-- 点击提交后的样式 start -->
              <div class="upload-info-btn" id="updated">
                <img src="img/ok.png" class="upload-ok">
                Updated
              </div>
              <!-- 点击提交后的样式 end -->
            </a>
          </div>
          <div class="basic-box" id="cancel">
            <div class="upload-info-cancel">
              <a href="">Cancel</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 中部 end -->

  <!-- 底部 start -->
  <footer class="bottom-box">
    <div class="bottom-bg">
      <img src="img/bottomBg.png" alt="">
    </div>
    <div class="bottom-content">
      <div class="content-left">
        <!-- <img src="img/bottomImg.png" alt=""> -->
      </div>
      <div class="content-right">
        <div class="about-us">ABOUT US</div>
        <div class="us-info">
          <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>

          <span class="us-info-add">​XXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
        </div>
        <div class="us-more">
          <a href="about.html" class="us-more-a">
            <div>
              READ MORE
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="bottom-copy">
      <div class="copy-css">© 2019 by Travel Sharer.</div>
    </div>
  </footer>
  <!-- 底部 end -->
  <script>
    $('#edit-info-click').hide();
    $('.click-more-nav').click(function(){
      $('.more-nav').show();
    })

    $("#upload").click(function(){
      $("#updated").show();
      $(this).hide();
    })
    $('#note-more').click(function(){
      $('#edit-info-click').toggle();
    });
    $("#edit-info-click").click(function () {
      $("#now-info").hide();
      $("#edit-info").show();
    })

    $(".per-edit-cancel").click(function () {
        $("#now-info").show();
        $("#edit-info").hide();
        $('#edit-info-click').hide();

      })

      $(".per-edit-confirm").click(function () {
          $("#now-info").show();
          $("#edit-info").hide();
          $('#edit-info-click').hide();

        })
     function change(obj) {
        console.log("change");
        var nf = obj.cloneNode(true);
        nf.value = ''; // 设计新控件value为空
        obj.parentNode.replaceChild(nf, obj);

        var file = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#edit-avatar').attr('src', e.target.result);
        }
        reader.readAsDataURL(file);
      }
  </script>
</body>

</html>